var nav = document.querySelectorAll(".nav >li");
var main = document.querySelectorAll(".main >div");
 for( var i=0; i<nav.length;i++){
     nav[i].index =i;
nav[i].addEventListener('mouseover',function () {
       for( var k=0;k<nav.length;k++){
           nav[k].classList.remove("active");
           main[k].classList.remove("active")
       }
        this.classList.add("active");
        console.log(this.index);
    main[this.index].classList.add("active")
     })
 }